<template>
  <div class="details">
    <div class="dialogs" ref="dialogsConsult">
        <div class="dialogs-wrapper">
          <img :src="consultImg" alt="">
          <a href="javascript:;" class="close" ref="closeDialogs" @click="closeDialogs"></a>
        </div>
      </div>
    <div class="details-banner">
      <img src="http://cdn.suoluomei.com/www/szcidesco.com/assets/banner.png?x-oss-process=image/quality,Q_10" alt="">
      <a href="javascript:;" class="btn-dialogs" @click.prevent="showDialogs"></a>
    </div>
    <div class="details-contant">
      <img src="http://cdn.suoluomei.com/www/szcidesco.com/assets/2.png?x-oss-process=image/quality,Q_10" alt="">
      <img src="http://cdn.suoluomei.com/www/szcidesco.com/assets/3.png?x-oss-process=image/quality,Q_10" alt="">
    </div>
    <div class="details-contant-zs">
      <img src="http://cdn.suoluomei.com/www/szcidesco.com/assets/4.png?x-oss-process=image/quality,Q_10" alt="">
    </div>
    <div class="details-contant-tip">
      <img src="http://cdn.suoluomei.com/www/szcidesco.com/assets/5.png?x-oss-process=image/quality,Q_10" alt="">
    </div>
    <div class="details-contant-mentor">
      <div class="Lecturer-title">
        <img src="http://cdn.suoluomei.com/www/szcidesco.com/assets/title.png?x-oss-process=image/quality,Q_10" alt="">
      </div>
      <div class="Lecturer-con">
        <img src="http://cdn.suoluomei.com/www/szcidesco.com/assets/6.png?x-oss-process=image/quality,Q_10" alt="">
      </div>
    </div>
    <!-- 讲师团图片滚播 -->
    <div class="details-contant-Lecturer">
      <div class="Lecturer-title">
        <img src="http://cdn.suoluomei.com/www/szcidesco.com/assets/title1.png?x-oss-process=image/quality,Q_10" alt="">
      </div>
      <div class="Lecturer-banner">
        <template>
          <el-carousel :interval="4000" indicator-position="none" arrow="never" type="card" height="400px">
            <el-carousel-item v-for="item in items" :key="item.index">
              <div class="banner-itme-img">
                <img :src="item.img" alt="">
                <div class="banner-itme-font">
                  <font>资深美容导师</font>
                  <font>︵ 中国香港 ︶</font>
                  <font>{{item.name}}</font>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </template>
      </div>
    </div>
    <!-- 导师团图片滚播 -->
    <div class="details-contant-teacher">
      <div class="teacher-title">
        <!-- <img src="http://cdn.suoluomei.com/www/szcidesco.com/assets/title.png?x-oss-process=image/quality,Q_20" alt=""> -->
        <img src="https://cdn.suoluomei.com/public/shendisige/image-pc/zjt.png" alt="">
      </div>
      <div class="teacher-con">
        <template>
          <div class="block">
            <el-carousel :interval="4000" indicator-position="none" arrow="never" height="330px">
              <el-carousel-item v-for="itemImg in itmesImg" :key="itemImg.index">
                <div class="itemImg-item">
                  <div class="itemImg-item1">
                    <img :src="itemImg.img1" alt="">
                    <div class="itemImg-item-name">
                      {{ itemImg.name1 }}
                    </div>
                  </div>
                  <div class="itemImg-item2">
                    <img :src="itemImg.img2" alt="">
                    <div class="itemImg-item-name">
                      {{ itemImg.name2 }}
                    </div>
                  </div>
                  <div class="itemImg-item3">
                    <img :src="itemImg.img3" alt="">
                    <div class="itemImg-item-name">
                      {{ itemImg.name3 }}
                    </div>
                  </div>
                  <div class="itemImg-item4">
                    <img :src="itemImg.img4" alt="">
                    <div class="itemImg-item-name">
                      {{ itemImg.name4 }}
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </template>
      </div>
    </div>
    <!-- 历届考试实录图片滚播 -->
    <div class="details-contant-cidesco">
      <div class="cidesco-title">
          <img src="http://cdn.suoluomei.com/www/szcidesco.com/assets/title3.png?x-oss-process=image/quality,Q_20" alt="">
      </div>
      <div class="cidesco-con">
        <template>
          <el-carousel :interval="5000" indicator-position="none" arrow="hover" height="520px">
            <el-carousel-item v-for="list in lists" :key="list.index">
              <img :src="list" alt="">
            </el-carousel-item>
          </el-carousel>
        </template>
      </div>
    </div>
    <div class="details-contant-ks">
      <img src="http://cdn.suoluomei.com/www/szcidesco.com/assets/10.png?x-oss-process=image/quality,Q_20" alt="">
    </div>
    <div class="details-contant-js">
      <img src="http://cdn.suoluomei.com/www/szcidesco.com/assets/11.png?x-oss-process=image/quality,Q_20" alt="">
    </div>
    <div class="details-contant-js">
      <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190312112210-002.png" alt="">
    </div>
    <div class="details-contant-js">
      <img src="http://cdn.suoluomei.com/www/szcidesco.com/assets/14.png?x-oss-process=image/quality,Q_20" alt="">
    </div>
  </div>
</template>

<script>
const imgData = [
  { img: "http://cdn.suoluomei.com/www/szcidesco.com/assets/邓嘉欣.jpg?x-oss-process=image/quality,Q_20", name: "邓嘉欣" },
  { img: "http://cdn.suoluomei.com/www/szcidesco.com/assets/陈琴.jpg?x-oss-process=image/quality,Q_20", name: "陈琴" },
  { img: "http://cdn.suoluomei.com/www/szcidesco.com/assets/娄晓敏.jpg?x-oss-process=image/quality,Q_20", name: "娄晓敏" },
  { img: "http://cdn.suoluomei.com/www/szcidesco.com/assets/赵子珊.jpg?x-oss-process=image/quality,Q_20", name: "赵子珊" },
  { img: "http://cdn.suoluomei.com/www/szcidesco.com/assets/朱秀儀.jpg?x-oss-process=image/quality,Q_20", name: "朱秀儀" }
];
const imgBigData = [
 "https://cdn.suoluomei.com/public/shendisige/image-pc/hs1.png",
 "https://cdn.suoluomei.com/public/shendisige/image-pc/hs2.jpg",
 "https://cdn.suoluomei.com/public/shendisige/image-pc/hs3.jpg",
 "https://cdn.suoluomei.com/public/shendisige/image-pc/hs4.jpg",
//  "http://cdn.suoluomei.com/www/szcidesco.com/assets/b5.jpg?x-oss-process=image/quality,Q_20",
//  "http://cdn.suoluomei.com/www/szcidesco.com/assets/b6.jpg?x-oss-process=image/quality,Q_20",
//  "http://cdn.suoluomei.com/www/szcidesco.com/assets/b7.jpg?x-oss-process=image/quality,Q_20",
//  "http://cdn.suoluomei.com/www/szcidesco.com/assets/b8.jpg?x-oss-process=image/quality,Q_20",
//  "http://cdn.suoluomei.com/www/szcidesco.com/assets/b9.jpg?x-oss-process=image/quality,Q_20",
//  "http://cdn.suoluomei.com/www/szcidesco.com/assets/b10.jpg?x-oss-process=image/quality,Q_20",
//  "http://cdn.suoluomei.com/www/szcidesco.com/assets/b11.jpg?x-oss-process=image/quality,Q_20"
];
const itmesImgData = [
  {
    img1: ("http://cdn.suoluomei.com/www/szcidesco.com/assets/Aimee老师.jpg?x-oss-process=image/quality,Q_20"),
    name1: "Aimee老师",
    img2: ("http://cdn.suoluomei.com/www/szcidesco.com/assets/Amy老师.jpg?x-oss-process=image/quality,Q_20"),
    name2: "Amy老师",
    img3: ("http://cdn.suoluomei.com/www/szcidesco.com/assets/Jina老师.jpg?x-oss-process=image/quality,Q_20"),
    name3: "Jina老师",
    img4: ("http://cdn.suoluomei.com/www/szcidesco.com/assets/Joey老师.jpg?x-oss-process=image/quality,Q_20"),
    name4: "Joey老师"
  },{
    img1: ("http://cdn.suoluomei.com/www/szcidesco.com/assets/Yoyo老师.jpg?x-oss-process=image/quality,Q_20"),
    name1: "Yoyo老师",
    img2: ("http://cdn.suoluomei.com/www/szcidesco.com/assets/海莲老师.jpg?x-oss-process=image/quality,Q_20"),
    name2: "海莲老师",
    img3: ("http://cdn.suoluomei.com/www/szcidesco.com/assets/菁儿老师.jpg?x-oss-process=image/quality,Q_20"),
    name3: "菁儿老师",
    img4: "http://cdn.suoluomei.com/www/szcidesco.com/assets/乐乐老师.jpg?x-oss-process=image/quality,Q_20",
    name4: "乐乐老师"
  },{
    img1: "http://cdn.suoluomei.com/www/szcidesco.com/assets/玲珑老师.jpg?x-oss-process=image/quality,Q_20",
    name1: "玲珑老师",
    img2: "http://sucai.suoluomei.cn/sucai_zs/images/20190312112209-001.png",
    name2: "影儿老师",
    img3: "http://cdn.suoluomei.com/www/szcidesco.com/assets/上官老师.jpg?x-oss-process=image/quality,Q_20",
    name3: "上官老师",
    img4: "http://cdn.suoluomei.com/www/szcidesco.com/assets/文佳老师.jpg?x-oss-process=image/quality,Q_20",
    name4: "文佳老师"
  },{
    img1: "http://cdn.suoluomei.com/www/szcidesco.com/assets/玉清老师.jpg?x-oss-process=image/quality,Q_20",
    name1: "玉清老师",
    img2: "http://cdn.suoluomei.com/www/szcidesco.com/assets/姿姿老师.jpg?x-oss-process=image/quality,Q_20",
    name2: "姿姿老师",
    img3: "http://cdn.suoluomei.com/www/szcidesco.com/assets/子晴老师.jpg?x-oss-process=image/quality,Q_20",
    name3: "子晴老师",
    img4: "http://cdn.suoluomei.com/www/szcidesco.com/assets/祖儿老师.jpg?x-oss-process=image/quality,Q_20",
    name4: "祖儿老师"
  }
];
export default {
  name: "Details",
  data() {
    return {
      items: imgData,
      lists: imgBigData,
      itmesImg: itmesImgData,
      consultImg: 'http://sucai.suoluomei.cn/sucai_zs/images/20181112/a5e01af1c4a4d61896678494cce79c33.png?x-oss-process=image/quality,Q_30'
    };
  },
  methods: {
    showDialogs() {
      this.$refs['dialogsConsult'].style.display = 'flex'
    },
    closeDialogs() {
      this.$refs['dialogsConsult'].style.display = 'none'
    }
  }
};
</script>

<style lang='scss' scoped>
.details {
  width: 100%;
  .dialogs {
      position: fixed;
      width: 100%;
      height: 100%;
      display: none;
      justify-content: center;
      align-content: center;
      background-color: rgba(0,0,0,.5);
      z-index: 9;
      .dialogs-wrapper {
        position: absolute;
        width: 450px;
        height: 450px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
      img {
        position: absolute;
        width: 450px;
        height: 450px;
        top: 0;
        left: 0;
        object-fit: contain;
        z-index: 10
      }
      .close {
      position: absolute;
      width: 36px;
      height: 20px;
      top: 43px;
      right: 42px;
      z-index: 11;
      }
    }
  .details-banner {
    position: relative;
    width: 100%;
    img {
      width: 100%;
    }
    .btn-dialogs {
      position: absolute;
      width: 6.3%;
      height: 4%;
      left: 18.9%;
      bottom: 21.2%;
    }
  }
  .details-contant {
    width: 100%;
    img {
      width: 72.5%;
      &:nth-of-type(1) {
        padding-left: 2.5%;
      }
      &:nth-of-type(2) {
        padding-right: 2.5%;
        margin-top: 50px;
      }
    }
  }
  .details-contant-zs {
    margin-top: 50px;
    width: 100%;
    img {
      width: 70%;
    }
  }
  .details-contant-tip {
    margin-top: 50px;
    width: 100%;
    img {
      width: 100%;
    }
  }
  .details-contant-mentor {
    margin-top: 50px;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    .Lecturer-title {
      width: 25%;
      img {
        width: 100%;
      }
    }
    .Lecturer-con {
      margin-top: 20px;
      width: 100%;
      img {
        width: 70%;
      }
    }
  }
  .details-contant-Lecturer {
    margin-top: 50px;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    .Lecturer-title {
      width: 25%;
      img {
        width: 100%;
      }
    }
    .Lecturer-banner {
      margin-top: 50px;
      width: 100%;
      .el-carousel__item--card.is-active {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        .banner-itme-img {
          width: 500px;
          height: 380px;
          overflow: hidden;
          border: 1px solid #dfd261;
          img {
            width: 100%;
          }
        }
        .banner-itme-font {
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100px;
          height: 400px;
          top: 0;
          right: 23%;
          font {
            display: inline-flex;
            width: 20px;
            text-align: center;
            color: #777;
            &:nth-of-type(3) {
              padding-right: 5px;
              color: #000;
              font-size: 20px;
            }
          }
        }
      }
    }
  }
  .details-contant-teacher {
    margin-top: 50px;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    .teacher-title {
      width: 25%;
      img {
        width: 100%;
      }
    }
    .teacher-con {
      margin-top: 20px;
      width: 80%;
      .itemImg-item {
        display: inline-flex;
        justify-content: space-around;
        width: 100%;
        .itemImg-item1 {
          width: 215px;
          height: 315px;
          border: 1px solid #dfd261;
          background-color: #fff;
          img{
            width: 215px;
            height: 285px;
          }
          .itemImg-item-name1 {
            width: 100%;
            height: 30px;
            background-color: red;
          }
        }
        .itemImg-item2 {
          width: 215px;
          height: 315px;
          border: 1px solid #dfd261;
          background-color: #fff;
          img{
            width: 215px;
            height: 285px;
          }
          .itemImg-item-name2 {
            width: 100%;
            height: 30px;
            background-color: red;
          }
        }
        .itemImg-item3 {
          width: 215px;
          height: 315px;
          border: 1px solid #dfd261;
          background-color: #fff;
          img{
            width: 215px;
            height: 285px;
          }
          .itemImg-item-name3 {
            width: 100%;
            height: 30px;
            background-color: red;
          }
        }
        .itemImg-item4 {
          width: 215px;
          height: 315px;
          border: 1px solid #dfd261;
          background-color: #fff;
          img{
            width: 215px;
            height: 285px;
          }
          .itemImg-item-name4 {
            width: 100%;
            height: 30px;
            background-color: red;
          }
        }
      }
    }
  }
  .details-contant-cidesco {
    margin-top: 50px;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    width: 1150px;
    height: 800px;
    .cidesco-title {
      width: 65%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .cidesco-con {
      position: absolute;
      top: 200px;
      width: 90%;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
  .details-contant-ks {
    width: 100%;
    display: flex;
    img {
      width: 100%;
    }
  }
  .details-contant-js {
    width: 100%;
    display: flex;
    img {
      width: 100%;
    }
  }
}
</style>

